<template>
  <div class="p-[20px]">
    <div class="flex items-center">
      <div class="mr-[50px]">搜索地点</div>
      <div class="mr-[20px]">
        <el-input
          v-model="startarea"
          class="w-50 m-2"
          size="large"
          placeholder="起点"
        />
      </div>
      <div>
        <el-input
          v-model="endarea"
          class="w-50 m-2"
          size="large"
          placeholder="终点"
        />
      </div>
    </div>
    <div ref="mapRef" class="w-[800px] h-[400px]"></div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import icon from "@/assets/imges/icon.png";
const startarea = ref("");
const endarea = ref("");
const mapRef = ref();
const map = ref();
const startpoint = ref();
const endpoint = ref();
const addComp = ref();
const points = ref({ lng: 116.405725, lat: 39.935362 });
const area = ref("");
const clicknum = ref(1);
const position = () => {
  // @ts-ignore
  let geolocation = new window.BMap.Geolocation();
  console.log(geolocation, "9999");
  if (geolocation) {
    geolocation.getCurrentPosition(
      function (res: any) {
        console.log(res);
        if (geolocation.getStatus() == 0) {
          // console.log(geolocation.getStatus(), "44444");
          map.value.centerAndZoom(res.point, 15);
          createicon(res.point);
        } else {
          // console.log(geolocation.getStatus());
        }
      },
      {
        enableHighAccuracy: true,
      }
    );
  }
};
const init = () => {
  map.value = new window.BMap.Map(mapRef.value);
  points.value = new window.BMap.Point(points.value.lng, points.value.lat);
  var marker = new window.BMap.Marker(points.value);
  // console.log(marker, "000");

  if (map.value) {
    map.value.centerAndZoom(points.value, 15);
    map.value.enableScrollWheelZoom(true);
  }

  map.value.addEventListener("click", function (e: any) {
    getaddress(e.point);
    createicon(e);
  });
};
const getaddress = (point: any) => {
  let geoc = new window.BMap.Geocoder();
  geoc.getLocation(point, function (rs: { addressComponents: any }) {
    addComp.value = rs.addressComponents;
    area.value =
      addComp.value.city + addComp.value.district + addComp.value.street;
    clicknum.value++;
    if (clicknum.value % 2 === 0) {
      endpoint.value = "";
      startpoint.value = point;
      startarea.value = area.value;
      var myIcon = new window.BMap.Icon(icon, new window.BMap.Size(23, 25));
      if (map.value) {
        map.value.clearOverlays();
        var marker = new window.BMap.Marker(point, { icon: myIcon }); // 创建标注
        map.value.addOverlay(marker);
      }
    } else {
      endpoint.value = point;
      endarea.value = area.value;
      if (map.value) {
        var markertwo = new window.BMap.Marker(point, { icon: myIcon }); // 创建标注
        map.value.addOverlay(markertwo);
      }
    }
    if (startpoint.value && endpoint.value) {
      getdrive(startpoint.value, endpoint.value);
    }
  });
};
const getdrive = (start: any, end: any) => {
  var driving = new window.BMap.DrivingRoute(map.value, {
    renderOptions: {
      map: map.value,
      // autoViewport: true,
    },
  });
  driving.search(start, end);
};
const createicon = (e: any) => {
  var myIcon = new window.BMap.Icon(icon, new window.BMap.Size(23, 25));
  if (map.value) {
    map.value.clearOverlays();
    var marker = new window.BMap.Marker(e, { icon: myIcon }); // 创建标注
    map.value.addOverlay(marker);
  }
};

onMounted(() => {
  init();
  position();
});
</script>

<style lang="less" scoped></style>
